<template>
  <div class="payfor">
		<figure class="avatar">
			<img :src="rdetail.masterPhoto" v-if="rdetail.masterPhoto">
		</figure>
		<h2 class="mname">{{rdetail.masterName}}</h2>
		<p class="tab-title">请选择金额</p>
		<ul class="tab-money">
			<li v-for="(v, i) in moneys" :key="'money' + i" :class="{active: moneyi == v}" class="vux-1px" @click="moneyi = v">￥{{v}}</li>
		</ul>
		<div class="custom">
			<label for="money">自定义金额</label>
			<div class="input">
				<span>￥</span>
				<input type="number" id="money" v-model="moneyi">
			</div>
		</div>

		<group gutter="0" class="textarea vux-1px">
      <x-textarea v-model="comment" :max="100" :rows="5" placeholder="大师算得准说的好，赞一下"></x-textarea>
    </group>

		<x-button type="primary" @click.native="toReward" class="btn-reward">确定打赏</x-button>

		<div class="all">
			<p><span>{{rdetail.userCount}}</span>人打赏了大师</p>
			<p>总打赏金额<span>{{rdetail.sumMoney}}</span>元</p>
		</div>

    <div v-transfer-dom>
      <popup v-model="paysShow">
        <div class="services">
          <div class="title">请选择支付方式</div>
          <div class="list vux-1px-tb">
            <ul>
              <li class="vux-1px-b" v-for="(v, i) in paysData" :key="'serv' + i" @click="paysIndex = i" :class="{active: paysIndex == i}">
                <span>{{v.payName}}</span>
              </li>
            </ul>
          </div>
          <x-button type="primary" :disabled="typeof paysIndex != 'number'" @click.native="selectPay">确定</x-button>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import {TransferDom, Popup, XTextarea, Group, XInput, XButton} from 'vux'

export default {
	directives: {
		TransferDom,
	},
	components: {
		Popup,
    XTextarea,
    Group,
		XInput,
		XButton,
  },
	data() {
		return {
			rdetail: {},
			moneys: ['10', '20', '50', '100'],
			moneyi: '10',
			comment: '',
      paysData: [],
      paysShow: false,
			paysIndex: false,
			wxConfig: {},
		}
	},
  computed: {
    uid() {
      return this.$store.state.userId;
    },
    mid() {
      return this.$route.query.id;
    }
  },
	methods: {
		getReward() {
			this.$http.fetchGet('getMasterReward', {
				userId: this.uid,
				masterId: this.mid,
			}).then(({data = {}}) => {
				console.log('打赏信息', data);
				this.rdetail = data;
			})
		},
		toReward() {
			this.$http.fetchGet('reward', {
				userId: this.uid,
				masterId: this.mid,
				price: this.moneyi,
				payment_id: 3,
				comment: this.comment,
			}).then((data) => {
				console.log('打赏支付', data);
				this.wxConfig = data;
				data.appId && this.wxpay();
			})
		},
		wxpay() {
			if (typeof WeixinJSBridge === 'undefined') {
				if (document.addEventListener) {
					document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
				} else if (document.attachEvent) {
					document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
					document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
				}
			} else {
				this.onBridgeReady()
			}
		},
		onBridgeReady() {
			WeixinJSBridge.invoke('getBrandWCPayRequest', {
				'appId': this.wxConfig.appId,
				'timeStamp': this.wxConfig.timeStamp,
				'nonceStr': this.wxConfig.nonceStr,
				'package': this.wxConfig.package,
				'signType': this.wxConfig.signType,
				'paySign': this.wxConfig.paySign
			}, (res) => {
				// alert('调试微信支付' + JSON.stringify(res));
				if (res.err_msg === 'get_brand_wcpay_request:ok') {
					alert('微信支付成功');
					this.$router.go(0);
				} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
					alert('用户取消支付');
				} else if (res.err_msg === 'get_brand_wcpay_request:fail') {
					alert('网络异常，请重试');
				}
			})
		},
		test(){
			let wx = this.$wechat;

			this.$http.fetchGet('getJsSignature', {
				url: 'http://demo.bjyoumeng.cn/web/',
			}).then((data = {}) => {
				console.log('微信js-sdk-sign', data);
				wx.config({
					debug: true,
					appId: 'wx9779127287c9a8b4',
					timestamp: data.timestamp,
					nonceStr: data.noncestr,
					signature: data.signature,
					jsApiList: ['chooseWXPay'],
				});
				wx.ready((r) => {
					console.log('rrrrrrrr', r);
					// this.$http.fetchGet('pay', {
					// 	userId: '',
					// 	orderId: '',
					// 	payMethod: 'wxpay',
					// }).then(({data = {}}) => {
					// 	wx.chooseWXPay({
					// 		timestamp: data.timestamp,
					// 		nonceStr: data.nonceStr,
					// 		package: data.package,
					// 		signType: data.signType,
					// 		paySign: data.paySign,
					// 		success: function (res) {
					// 			console.log(res, '成功回调')
					// 		}
					// 	})
					// })
				});

				wx.error(function(res){
					console.log(res);
				});
			})
		},
		getPays() {
			this.$http.fetchGet('getPaymentList').then(({data = []}) => {
				console.log('支付方式', data);
				this.paysData = data;
				this.paysShow = true;
			})
		},
		selectPay() {
			console.log( this.uid, this.mdetail, this.paysData[this.paysIndex] )
		},
	},
	created() {
		this.getReward();
	}
};
</script>

<style scoped lang="less">
.payfor{
	.padd(24, 70);
	.avatar{
		img{
			display: block;
			margin: 0 auto;
			.w(170);
			.h(170);
			border-radius: 50%;
		}
	}
	.mname{
		.f30;
		line-height: 3;
		text-align: center;
		font-weight: normal;
	}
	.tab-title{
		.f24;
		line-height: 3;
	}
	.tab-money{
		.f24;
		display: flex;
		justify-content: space-between;
		li{
			.w(136);
			.lh(58);
			text-align: center;
			color: @primary;
			background-color: #ffffff;
			.bri(10);
			&::before{
				.bri(20);
				box-sizing: border-box;
				border-color: @primary;
			}
			&.active{
				color: #ffffff;
				background-color: @primary;
			}
		}
	}
	.custom{
		display: flex;
		align-items: center;
		justify-content: center;
		.f24;
		.pt(40);
		.pb(40);
		.input{
			.bri(10);
			.w(182);
			.pr(10);
			.ml(18);
			display: flex;
			align-items: center;
			border: 1px solid @primary;
			span{
				.pl(10);
				.pr(10);
				.f30;
				color: @primary;
			}
			input{
				.f24;
				color: @primary;
				border: 0;
				padding: 0;
				outline: none;
				width: 100%;
				.h(38);
				.pt(10);
				.pb(10);
			}
		}
	}
	.all{
		display: flex;
		justify-content: space-between;
		line-height: 1;
		.pt(40);
		.pb(40);
		.f20;
		p {
			span{
				color: #E73828;
				margin-right: 0.3em;
			}
			&:nth-child(2) span{
				margin-left: 0.3em;
			}
		}
	}
	.textarea{
		overflow: hidden;
		border-radius: 10px;
		.vux-x-textarea{
			z-index: 1;
			background-color: #F4F5F6;
		}
	}
	.btn-reward{
		.mt(40);
	}
}
.services{
  .pl(20);
  .pr(20);
  .pb(20);
  background-color: #ffffff;
  .title{
    .f30;
    .lh(95);
    text-align: center;
  }
  .list{
    .mb(20);
    li{
      .h(84);
      .f28;
      color: #666666;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.active{
        color: @primary;
      }
    }
  }
}
</style>
